<script src="../addons/{php echo $this->modulename}/public/js/jquery.contextMenu.js?v={TIMESTAMP}" type="text/javascript"></script>
<script src="../addons/{php echo $this->modulename}/public/js/designer.js?v={TIMESTAMP}" type="text/javascript"></script>
<script type="text/javascript" src="../addons/{php echo $this->modulename}/public/js/jquery.form.js?v={TIMESTAMP}"></script>
<link href="../addons/{php echo $this->modulename}/public/css/jquery.contextMenu.css" rel="stylesheet">
<link href="../addons/{php echo $this->modulename}/public/css/poster.css" rel="stylesheet">
<div class='panel panel-default'>
            <div class='panel-heading'>
                专属二维码海报设置
            </div>
            <div class='panel-body'>
            	<div class="form-group">
			        <label class="col-xs-12 col-sm-3 col-md-1 control-label">海报功能</label>
			        <div class="col-sm-11 col-xs-12">
			             <label><input type="radio" value="0" name='poster[switch]' checked>关闭</label>
			             <label><input type="radio" value="1" name='poster[switch]' {if $poster['switch']}checked{/if}>开启</label>
			        </div>
				</div>
                <div class="form-group">
                    <label class="col-xs-12 col-sm-3 col-md-1 control-label">海报设计</label>
                    <div class="col-sm-11 col-xs-12">
                    	<input type="hidden" name="poster[data]">
                        <table style='width:100%;'>
                                <tr>
                                    <td id="bgtd" style='padding:10px;' valign='top'>
                                        <div id='jun_poster'>
                                          {if !empty($poster['bg'])}
                                          <img src='{php echo toimage($poster['bg'])}' class='bg'/>
                                          {/if}
                                          {if !empty($poster['data'])}
                                          {loop $poster['data'] $key $d}
                                          <div class="drag" type="{$d['type']}" index="{php echo $key+1}" style="zindex:{php echo $key+1};left:{$d['left']};top:{$d['top']};
                                               width:{$d['width']};height:{$d['height']}" size="{$d['size']}" color="{$d['color']}" > 
                                                {if $d['type']=='img' || $d['type']=='thumb'}
                                                  <img src="{php echo '../addons/'.$this->modulename.'/public/img/default.jpg'}" />
                                                {elseif $d['type']=='qr'}
                                                  <img src="../addons/{php echo $this->modulename}/public/img/qr.png" />
                                                {elseif $d['type']=='name'}
                                                   <div class=text style="font-size:{$d['size']};color:{$d['color']}" >昵称</div> 
                                                 {elseif $d['type']=='code'}
                                                   <div class=text style="font-size:{$d['size']};color:{$d['color']}" >工号</div> 
                                                {/if}
                                              <div class="dRightDown"> </div><div class="dLeftDown"> </div><div class="dRightUp"> </div><div class="dLeftUp"> </div><div class="dRight"> </div><div class="dLeft"> </div><div class="rUp"> </div><div class="rDown"></div>
                                          </div>
                                          {/loop} 
                                          {/if}
                                        </div>
                                    </td>
                                    <td valign='top' style='padding:10px;'>
                                          <div class='panel panel-default' style="border-color: yellowgreen;">
                                              <div class='panel-body'>
                                                    <div class="form-group">
                                                        <label class="col-xs-12 col-sm-3 col-md-2 control-label">海报元素</label>
                                                        <div class="col-sm-9 col-xs-12">
                                                        	<button class='btn btn-info btn-poster' type='button' data-type='img' >头像</button>
                                                             <button class='btn btn-primary btn-poster' type='button' data-type='name'>昵称</button>
                                                             <button class='btn btn-warning btn-poster' type='button' data-type='qr' >专属二维码</button>
                                                        </div>
                                                    </div>
                                                  <div id='namesset' style='display:none'>
                                                  <div class="form-group">
                                                        <label class="col-xs-12 col-sm-3 col-md-2 control-label">名字颜色</label>
                                                         <div class="col-sm-9 col-xs-12">
                                                              {php echo tpl_form_field_color('color')}
                                                        </div>
                                                    </div>
                                                  <div class="form-group">
                                                        <label class="col-xs-12 col-sm-3 col-md-2 control-label">名字大小</label>
                                                        <div class="col-sm-6">
                                                             <div class='input-group'>
                                                                 <input type="text" id="namesize" class="form-control namesize" placeholder="例如: 15"  />
                                                                 <div class='input-group-addon'>px</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                             </div>
                                             	<div class="form-group" id="posterbg">
                                                    <label class="col-xs-12 col-sm-3 col-md-2 control-label">海报背景</label>
                                                    <div class="col-sm-9 col-xs-12">
                                                       {php echo tpl_form_field_image('poster[bg]',$poster['bg']);}
                                                       <span class='help-block'>海报背景大小建议尺寸为: 640 * 1008</span>
                                                    </div>
                                                </div>
                                          </div>
                                   </div>
                                    </td>
                                </tr>
                        </table>
                    </div>
	    		</div>
		<div class="form-group">
	        <label class="col-xs-12 col-sm-3 col-md-1 control-label">海报引导语</label>
	        <div class="col-sm-11 col-xs-12">
	             <textarea class="form-control" name='poster[tips]'>{$poster['tips']}</textarea>
	             <span class='help-block'>例如：点击按钮保存海报，分享至朋友圈;好友扫码进入后即可获得挑战机会</span>
	        </div>
		</div>
	</div>
</div>
<script src="../addons/{php echo $this->modulename}/public/js/poster.js?v={TIMESTAMP}" type="text/javascript"></script>
<script>
var gqrt = 0;
var attachurl = "{$_W['attachurl']}";
var ncounter = 0;
    
         function jun_bind(obj){
            var imgsset = $('#imgsset');
            var namesset = $("#namesset");
            var codeset = $("#codeset");
             imgsset.hide();
             namesset.hide();
             codeset.hide();
             deleteTimers();
             var type = obj.attr('type');
             if(type=='name'){
                  namesset.show();
                  var size = obj.attr('size') || "16";
                  var picker = namesset.find('.sp-preview-inner');
                  var input = namesset.find('input:first');
                  var namesize = namesset.find('#namesize');
                  var color = obj.attr('color') || "#000";
                  input.val(color); namesize.val(size.replace("px",""));  
                  picker.css( {'background-color':color,'font-size':size});
                  ncounter = setInterval(function(){
                       obj.attr('color',input.val()).find('.text').css('color',input.val());
                       obj.attr('size',namesize.val() +"px").find('.text').css('font-size',namesize.val() +"px");
                   },100);
             } else if(type=='code'){
            	 codeset.show();
                 var size = obj.attr('size') || "16";
                 var picker = codeset.find('.sp-preview-inner');
                 var input = codeset.find('input:first');
                 var namesize = codeset.find('#namesize');
                 var color = obj.attr('color') || "#000";
                 input.val(color); namesize.val(size.replace("px",""));  
                 picker.css( {'background-color':color,'font-size':size});
                 ncounter = setInterval(function(){
                      obj.attr('color',input.val()).find('.text').css('color',input.val());
                      obj.attr('size',namesize.val() +"px").find('.text').css('font-size',namesize.val() +"px");
                  },100);
            }  
         }
         var bscounter = 0 ;        
    $(function(){
        {if !empty($poster)}
          $('.drag').each(function(){
              dragEvent($(this));
          })
        {/if}
          
        	  $('.btn-poster').click(function(){
                  var imgsset = $('#imgsset');
                  var namesset = $("#namesset");
                  var codeset = $("#codeset");
                  imgsset.hide();
                  codeset.hide();
                  namesset.hide();
                  deleteTimers();
                   var type = $(this).data('type');
                   var img = "";
                 	if(type=='img' || type=='thumb'){
                       img = '<img src="../addons/{php echo $this->modulename}/public/img/default.jpg" />';
                   }else if(type=='name'){
                       img = '<div class=text>姓名</div>';
                   }else if(type=='code'){
                       img = '<div class="text">工号</div>';
                   }else if(type=='qr'){
                       img = '<img src="../addons/{php echo $this->modulename}/public/img/qr.png" />';
                   }
                   var index = $('#jun_poster .drag').length+1;
                   var obj = $('<div class="drag" type="' + type +'" index="' + index +'" style="z-index:' + index+'">' + img+'<div class="dRightDown"> </div><div class="dLeftDown"> </div><div class="dRightUp"> </div><div class="dLeftUp"> </div><div class="dRight"> </div><div class="dLeft"> </div><div class="rUp"> </div><div class="rDown"></div></div>');
                   $('#jun_poster').append(obj);
                   dragEvent(obj);
               });
           
                $('.drag').click(function(){
                    jun_bind($(this));
                })
            
    })
 var imgcounter = 0 ;   
     $('form').submit(function(){
        var poster = [];
        $('.drag').each(function(){
            var obj = $(this);
            var type = obj.attr('type');
            var left = obj.css('left');
            var top = obj.css('top');
            var d= {left:left,top:top,type:obj.attr('type'),width:obj.css('width'),height:obj.css('height')};
            if(type=='name'){
                d.size = obj.attr('size');
                d.color = obj.attr('color');
            }else if(type=='code'){
                d.size = obj.attr('size');
                d.color = obj.attr('color');
            }
            poster.push(d);
        });
        $('input[name="poster[data]"]').val( JSON.stringify(poster));
        return true;
    });
     
    </script>